<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>才上眉头却下心头</title>
	<link rel="stylesheet" href="./css/new_file.css" />
	<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="lib/jquery-3.4.1.js"></script>
	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
	<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
	<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
	<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
	<div class="container">
		<div class="panel">
			<div class="content login">
				<div class="switch">
					<span id="login" class="active">Login</span><span>/</span><span id="signup">SignUp</span>
				</div>
				<form action="才下眉头.html" id="myform">
					<div id="email" class="input" placeholder="Email"><input type="email" title="请输入您的邮箱"></div>
					<div class="input" placeholder="Username"><input type="text" id="user" title="请提供您的用户名。"></div>
					<div class="input" placeholder="Password"><input type="password" title="请输入您的密码。" id="password" name="password"></div>
					<div id="repeat" class="input" placeholder="Repeat"><input type="password" title="请再次输入你的密码" id="password_again" name="password_again"></div>
					<span>Forget?</span>
					<div><input type="submit" value="Login" class="submit"></div>
				</form>
			</div>
		</div>
	</div>

</body>
<script>
	$("#login").click(function () {
		$(".switch span").removeClass("active");
		$(this).addClass('active');

		$(this).parents(".content").removeClass("signUp");
		$(this).parents(".content").addClass("login");
	})

	$("#signup").click(function () {
		$(".switch span").removeClass("active");
		$(this).addClass('active');

		$(this).parents(".content").removeClass("login");
		$(this).parents(".content").addClass("signup");
	})

	$(".input input").on("focus", function () {
		$(this).parent().addClass("focus");
	})

	$(".input input").on("blur", function () {
		if ($(this).val() === '')
			$(this).parent().removeClass("focus");
	})
	$(function () {
		var tooltips = $("[title]").tooltip();
	});
	jQuery.validator.setDefaults({
		debug: true,
		success: "valid"
	});
	$("#myform").validate({
		rules: {
			password: "required",
			password_again: {
				equalTo: "#password"
			}
		}
	});
</script>

</html>